<template>
  <NMessageProvider>
    <div class="bg-[rgb(227,202,202)] h-screen p-12">
      <div class="bg-[rgb(241,229,229)] h-full rounded-lg p-8 relative">
        <div class="bg-[rgb(248,242,242)] rounded-2xl h-full flex">
          <nav class="bg-[rgb(235,192,190)] rounded-2xl flex flex-col text-4xl text-white items-center gap-4 w-28 p-4 absolute bottom-8 top-8 m-8 pt-8 z-10">
            <NuxtLink to="/" class="p-2 rounded-md transition-all">
              <Icon name="tabler:home" />
            </NuxtLink>
            <div class="border-2 border-white w-full my-4" />
            <NuxtLink to="/calendar" class="p-2 rounded-md transition-all">
              <Icon name="tabler:calendar" />
            </NuxtLink>
            <NuxtLink to="/record" class="p-2 rounded-md transition-all">
              <Icon name="tabler:notes" />
            </NuxtLink>
            <NuxtLink to="/memo" class="p-2 rounded-md transition-all">
              <Icon name="tabler:heart" />
            </NuxtLink>
            <NuxtLink to="/user" class="p-2 rounded-md transition-all">
              <Icon name="gg:girl" />
            </NuxtLink>
          </nav>
          <NuxtPage class="w-full relative h-full" />
        </div>
      </div>
    </div>
  </NMessageProvider>
</template>

<style>
@import url('https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap');

.router-link-active{
  @apply bg-white text-[rgb(235,192,190)] shadow-lg shadow-white/50
}
</style>
